import React, { Component } from 'react';
import moment from 'moment'
import { connect } from 'react-redux'  
import { Modal, Form, Input,Select ,DatePicker ,Tree,TreeSelect,TimePicker ,Radio,Button,} from 'antd';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option =Select.Option;
const format = 'HH:mm';
class AddPatrolModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }

  okHandler = () => {
     const { onOk } = this.props;
     this.props.form.validateFields((err, values) => {
      if (!err) {
        values.beginTime = new moment(values.beginTime).format("HH:mm");
        values.endTime = new moment(values.endTime).format("HH:mm");
        onOk(values);
      }
     });
  };

  
  render() {
    const { children, dispatch,item,roomList,userList,isShowUser,editDetailHandler,addDetailHandler } = this.props;    
    const { getFieldDecorator } = this.props.form;   
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
    }; 
    const formItemLayout1 = {
      labelCol: { span: 6 },
      wrapperCol: { span: 6 },
    };  
 
    const getUser = data => data.map((item) => {
     return <Option key={item.id_+''}>{item.name}</Option>
    })
    const getRoom = data => data.map((item) => {
      return <Option key={item.id_+''}>{item.name}</Option>
    })
  
    return (
      <span>
              <Modal
                    maskClosable= {this.props.maskClosable}
                    confirmLoading= {this.props.confirmLoading}
                    title={this.props.title}
                    visible={this.props.visible}
                    onOk={this.okHandler}
                    onCancel={this.props.onCancel}
                    key={this.props.newKey}
              >
         
                <Form layout='horizontal' onSubmit={this.okHandler}>
                      <FormItem style={{marginBottom:'0px'}}>
                        {getFieldDecorator('id',{initialValue:item.id_})(
                          <Input type="hidden"/>
                        )}
                      </FormItem> 
                      <FormItem
                          {...formItemLayout}
                            label="巡检名称"
                            hasFeedback
                          >
                          {
                            getFieldDecorator('name', {
                              initialValue: item.name,
                              rules: [{
                                required: true, whitespace: true, message: '请输入巡检单名称',
                              },{
                                max:20,message: '巡检单名称不能超过20个字',
                              }]
                            })(<Input placeholder="请输入巡检单名称"/>)
                          }
                      </FormItem>  
                      <FormItem
                          {...formItemLayout}
                          label="巡检日期"
                          hasFeedback
                      >
                        {getFieldDecorator('inspectDate', {
                              initialValue:item.inspectDate!=null?moment(item.inspectDate):null ,
                              rules: [{
                                  required: true, type: 'object',whitespace: true, message: '请选择巡检日期',
                                 }]
                          })(
                               <DatePicker format="YYYY-MM-DD" />
                          )}
                      </FormItem>                       
                                     
                      <FormItem
                          {...formItemLayout1}
                          label="开始时间"
                      >
                          {getFieldDecorator('beginTime', {
                                initialValue: item.beginTime!=null?moment(item.beginTime,"HH:mm"):null,   
                                rules: [{
                                  required: true, type: 'object',whitespace: true, message: '请选择开始时间',
                                 }]
                               })(
                                <TimePicker format='HH:mm' />
                            )}
                      </FormItem>
                      <FormItem
                            {...formItemLayout1}
                            label="结束时间"
                          >
                            {getFieldDecorator('endTime', {  
                                initialValue: item.endTime!=null?moment(item.endTime,"HH:mm"):null ,
                                rules: [{
                                  required: true, type: 'object',whitespace: true, message: '请选择开始时间',
                                 }]
                               })(
                                <TimePicker  value={item.endTime} format='HH:mm' />
                            )}
                      </FormItem>         

                      <FormItem
                            {...formItemLayout}
                              label="巡检机房"
                              hasFeedback
                            >
                            {getFieldDecorator('roomId', {
                              initialValue:  item.roomId_ == undefined? undefined : item.roomId_+"",   
                              rules: [{
                                required: true, whitespace: true, message: '请选择巡检机房',
                              }]
                            })(
                              <Select
                                showSearch
                                placeholder="请选择巡检机房"
                                optionFilterProp="children"
                              >
                                {getRoom(roomList)}
                              </Select>
                            )}  
                        </FormItem>

                      <FormItem
                          {...formItemLayout}
                          label="责任人"
                           hasFeedback
                      >
                          {getFieldDecorator('operatiorBy', {
                                initialValue:  item.operatiorBy_ == null? "" : item.operatiorBy_,   
                                rules: [{
                                  required: true, whitespace: true, message: '请选择巡检责任人',
                                }]
                          })(
                              <Select
                                  placeholder="选择巡检责任人"
                                  optionFilterProp="children"  
                              >
                                  {getUser(userList)}
                              </Select>   
                        )}
                        </FormItem>                      
                    
                        <FormItem
                            {...formItemLayout}
                            label="备注"
                            hasFeedback
                        >
                        {
                          getFieldDecorator('remark', {
                              initialValue:  item.remark,  
                              rules: [{ max: 200, message: '备注信息 200 字符以内' },]
                          })(<Input type="textarea" autosize={{ minRows: 3, maxRows: 6 }}/>)
                        }
                        </FormItem>     
                   
                </Form>              
        </Modal>        
      </span>
    );
  }
    
}

export default Form.create()(AddPatrolModal)